import React from 'react'
import { Tabbar } from 'react-vant';
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import { createFromIconfontCN } from '@react-vant/icons'
import { Outlet,useNavigate } from 'react-router-dom';
export default function App() {
  const IconFont = createFromIconfontCN(
    '//at.alicdn.com/t/c/font_4528732_ya6gxzkdoc.js'
  )
  const navigate = useNavigate()
  
  return (
    <div>
      <div className='demo-tabbar'>
        <Outlet />
        <Tabbar>
          <Tabbar.Item onClick={() => navigate('/home')} icon={<HomeO />}>首页</Tabbar.Item>
          <Tabbar.Item onClick={() => navigate('/video')} icon={<IconFont name='icon-shexiangji' />}>视频</Tabbar.Item>
          <Tabbar.Item onClick={() => navigate('/news')} icon={<IconFont name='icon-notification' />}>消息</Tabbar.Item>
          <Tabbar.Item onClick={() => navigate('/my')} icon={<IconFont name='icon-yonghu' />}>我的</Tabbar.Item>
        </Tabbar>
      </div>
    </div>
  )
}
